<template>
    <!-- 创建发薪信息 -->
    <div id="paurollCompile">
        <!--btnArr：控制头部的文本以及数量 -->
        <operationPayrollTitle title="创建发薪信息" :btnArr="btnArr" :fn="add"  myIndex=0></operationPayrollTitle>
        <!-- starCss：控制*号的显示，myDisabled：控制表单是否禁用 --> 
        <operationPayrollForm :myDisabled="false" :starCss="{star:true}" :payrollData="cimpileData"></operationPayrollForm>
    </div>
</template>

<script>
// 头部
import operationPayrollTitle from './operationPayrollTitle'
// 表单
import operationPayrollForm from './operationPayrollForm'
export default {
    components:{
        operationPayrollTitle,
        operationPayrollForm,
    },
    data() {
        return {
            btnArr:["创建"],   //控制头部的文本以及数量
            cimpileData:{
                staffName: "",            // 员工姓名
                clientJobNumber: "",      // 客户工号
                idNumber: "",             // 证件号码
                mobile: "",               // 手机号
                bank:"",                  // 开户银行
                cardNo:"",                // 银行卡号
                financialAccount:"",      // 顺丰金融账号
                staffState:"正式"
            }
        }
    },
    methods: {
        add(){
            this.$store.commit("addData",this.cimpileData)
            console.log(this.cimpileData);
            this.$router.push("/home/payroll")
        }
    },
}
</script>

<style lang="less">
    #paurollCompile{
        background-color: #ffffff;
    }
</style>